<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '拼团活动',
    navigationStyle: 'default',
  },
}
</route>

<template>
  <view class="container bg-[#f3f3f3]">
    <view class="bg-white sticky top-0 z-10 shadow-sm">
      <view class="w-full no-scrollbar p-2 shadow">
        <scroll-view class="scroll no-scrollbar mt-1" scroll-x="true">
          <view v-for="category in categories" @tap="setActiveCategory(category.id)" :key="category.id" class="item">
            <view class="w-12 h-12 rounded-full shadow-md flex items-center justify-center mb-1"
              :class="activeCategory == category.id ? 'bg-orange-100' : 'bg-gray-100'">
              <image :src="category.image" :alt="category.cateName" class="w-8 h-8 rounded-full object-contain" />
            </view>
            <view class="text-xs w-full text-center text-gray-700"
              :class="activeCategory == category.id ? 'text-orange-500' : 'text-gray-600'">
              {{ category.cateName }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="list">
      <groupProduct v-for="product in groupItems" :key="product.id" @join="showPopup" :product="product" />
      <wd-status-tip image="search" tip="当前搜索无结果" v-if="groupItems.length == 0" />
    </view>

    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>

    <view class="back-to-top" v-if="showBackToTop" @tap="scrollToTop">
      <text class="back-icon">↑</text>
    </view>

    <GroupSubmit :visible="popupVisible" @close="hidePopup" @pay="handlePayment" />
  </view>
</template>

<script setup>
import { http } from '@/utils/http'
import { ref, onMounted, onUnmounted } from 'vue'
import groupProduct from '@/components/groupProduct.vue'
import GroupSubmit from '@/components/groupSubmit.vue'
import { useInviteStore } from '@/store/invite'


const categories = ref([])

const activeCategory = ref(0)
const total = ref(0)
const groupItems = ref([])
const loading = ref(false)
const showBackToTop = ref(false)

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  isSpell: 2,
  status: 1,
})

const setActiveCategory = (index) => {
  activeCategory.value = index
  queryParams.value.pageNum = 1
  groupItems.value = []
  loadData()
}

const loadMore = () => {
  if (!loading.value && total.value > groupItems.value.length) {
    queryParams.value.pageNum = queryParams.value.pageNum + 1
    loadData()
  }
}

const scrollToTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  })
}

const getCategoryList = async () => {
  let res = await http.get('/api/home/categories', { type: 2 })
  if (res.code === 200) {
    categories.value = res.data.categories
    categories.value.unshift({
      id: '',
      cateName: '全部',
      image: 'http://llcdn.jxsr.com/917d0304-b766-4c50-9fe2-1ab43d524bb7能.png',
    })
    if (categories.value.length > 0) {
      // activeCategory.value = categories.value[0].id
      activeCategory.value = ''

      loadData()
    }
  }
}

const loadData = async () => {
  loading.value = true

  let res = await http.get('/api/home/products', {
    cateId: activeCategory.value,
    ...queryParams.value,
  })
  if (res.code === 200) {
    if (queryParams.value.pageNum == 1) {
      groupItems.value = res.data.products
    } else {
      groupItems.value = groupItems.value.caoncat(res.data.products)
    }

    total.value = res.data.total
  }
  loading.value = false
}

const inviteStore = useInviteStore()

onLoad((option) => {
  if (option.id && option.invitationCode) {
    inviteStore.push(option.id, option.invitationCode)
  }

  getCategoryList()
})

onReachBottom(() => {
  loadMore()
})

const popupVisible = ref(false)

const showPopup = () => {
  popupVisible.value = true
}

const hidePopup = () => {
  popupVisible.value = false
}

const handlePayment = (paymentData) => {
  console.log('支付数据:', paymentData)
  // 处理支付逻辑
  uni.showToast({
    title: '支付成功',
    icon: 'success',
  })
  hidePopup()
}

onShareAppMessage(() => {
  return {
    title: '邻里生活荟',
    path: '/pages/group/index',
  }
})
onShareTimeline(() => {
  return {
    title: '邻里生活荟',
    path: '/pages/group/index',
  }
})
</script>

<style scoped>
.container {
  position: relative;
  min-height: 100dvh;
}

.list {
  box-sizing: border-box;
  padding: 0 20rpx;
}

.header {
  color: #fff;
  background-color: #ff8c00;
}

.pt-header {
  box-sizing: content-box;
  padding: 40rpx 30rpx 20rpx;
  padding-top: calc(var(--status-bar-height) + 40rpx);
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.category-scroll {
  width: 750rpx;
  padding: 20rpx 0;
  white-space: nowrap;
  border-bottom: 1rpx solid #eee;
}

.category-container {
  display: inline-block;
  padding: 0 20rpx;
}

.category-item {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666;
  background: #fff;
  border-radius: 30rpx;
}

.category-item:first-child {
  margin-left: 20rpx;
}

.category-active {
  color: #fff;
  background-color: #ff8c00;
}

.group-list {
  box-sizing: border-box;
  padding: 20rpx;
}

.group-item {
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.store-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.store-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}

.store-details {
  flex: 1;
}

.store-name {
  margin-bottom: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.store-tags {
  display: flex;
}

.tag {
  padding: 4rpx 12rpx;
  margin-right: 10rpx;
  font-size: 20rpx;
  color: #ff8c00;
  background-color: rgba(255, 140, 0, 0.1);
  border-radius: 6rpx;
}

.subscribe-btn {
  padding: 6rpx 20rpx;
  font-size: 24rpx;
  line-height: 1.5;
  color: #ff8c00;
  border: 1rpx solid #ff8c00;
  border-radius: 30rpx;
}

.product-info {
  margin-bottom: 20rpx;
}

.product-name {
  margin-bottom: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 1.4;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
}

.product-images {
  display: flex;
  margin-bottom: 20rpx;
}

.product-image {
  width: 220rpx;
  height: 220rpx;
  margin-right: 10rpx;
  border-radius: 8rpx;
}

.price-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.price-container {
  display: flex;
  align-items: baseline;
}

.price-label {
  margin-right: 10rpx;
  font-size: 24rpx;
  color: #ff8c00;
}

.price {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff8c00;
}

.stats {
  display: flex;
  flex-flow: row nowrap;

  font-size: 24rpx;
  color: #999;
}

.stat-item {
  margin-left: 20rpx;
}

.action-buttons {
  display: flex;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  padding: 16rpx 0;
  font-size: 28rpx;
  line-height: 1.5;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.btn-icon {
  margin-right: 10rpx;
}

.loading {
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 36rpx;
  color: #ff8c00;
}

.scroll {
  width: 750rpx;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 100rpx;
  margin-right: 58rpx;
}
</style>
